<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="height:400px;"></div>
  <button id="modify">修改数据</button>
  <button id="add">增加一条数据</button>
  <button id="addRandom">随机增加数据</button>
  <button id="stop">暂停</button>

  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    let mCharts = echarts.init(document.getElementById('echarts'))
    const XDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    const YDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    // const XDataArr = ['张三', '李四']
    // const YDataArr = [0, 100]

    let option = {
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
        {
          type: 'slider',
          show: true,
          yAxisIndex: [0],
        },
      ],
      xAxis: {
        type: 'category', //设置为类目轴
        data: XDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',//柱状图
          data: YDataArr,
          // 标记
          markPoint: {
            data: [
              {
                type: 'max', name: "最大值"
              }, {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              { type: "average", name: "平均值" }
            ]
          },
          label: {
            // 显示数值
            show: true,
            //数值旋转
            rotate: 60,
            // 标签的位置
            position: 'top'
          },
          // 柱的宽度
          barWidth: '60%',

        }
      ]
    }
    mCharts.setOption(option)

    const modify = document.querySelector('#modify')
    const add = document.querySelector('#add')
    const stop = document.querySelector('#stop')

    // 修改数据
    modify.onclick = function () {
      let newYDataArr = [78, 68, 63, 91, 81, 85, 72, 86]
      // setOption 可以设置多次
      // 新的option 和 旧的 option
      // 新旧option的关系是相互整合的关系
      // 哦我们呢在设置新的option的时候,只需要考虑到变化的部分就可以了
      let option = {
        series: [
          {
            data: newYDataArr,
          }
        ]
      }

      mCharts.setOption(option)
    }
    window.onresize = mCharts.resize

    let timer = null

    // 增加数据
    add.onclick = function () {
      // 老师的做法 不过没这么做也有效果(直接 setOption)
      XDataArr.push('小明' + Math.floor(Math.random() * 100))
      YDataArr.push(Math.floor(Math.random() * 101))
      let option = {
        xAxis: {
          data: XDataArr
        },
        series: [
          {
            data: YDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
    addRandom.onclick = function () {
      timer = setInterval(() => {
        XDataArr.push('小明' + Math.floor(Math.random() * 100))
        YDataArr.push(Math.floor(Math.random() * 101))
        mCharts.setOption(option)
      }, 300);
    }
    stop.onclick = function () {
      clearInterval(timer)
    }
  </script>
</body>

</html>